<template>
  <div class="chart-container">
    <v-chart :option="option" autoresize />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { use } from 'echarts/core'
import VChart from 'vue-echarts'
import { CanvasRenderer } from 'echarts/renderers'
import { PieChart } from 'echarts/charts'
import { TitleComponent, TooltipComponent, LegendComponent } from 'echarts/components'

use([CanvasRenderer, PieChart, TitleComponent, TooltipComponent, LegendComponent])

// 初始化变量
const bgColor = '#062a44'
const title = '总量'
const color = ['#0E7CE2', '#FF8352', '#E271DE', '#F8456B', '#00FFFF', '#4AEAB0']
const echartData = [
  { name: '好评', value: 3720 },
  { name: '中评', value: 2920 },
  { name: '未评价', value: 2200 },
  { name: '差评', value: 1420 }
]

const formatNumber = (num) => {
  const reg = /(?=(\B)(\d{3})+$)/g
  return num.toString().replace(reg, ',')
}

const total = echartData.reduce((a, b) => a + b.value * 1, 0)

const option = ref({
  backgroundColor: bgColor,
  color: color,
  title: [
    {
      text: `{name|${title}}\n{val|${formatNumber(total)}}`,
      top: 'center',
      left: 'center',
      textStyle: {
        rich: {
          name: {
            fontSize: 14,
            fontWeight: 'normal',
            color: '#ffffff',
            padding: [10, 0]
          },
          val: {
            fontSize: 32,
            fontWeight: 'bold',
            color: '#ffffff'
          }
        }
      }
    }
  ],
  series: [
    {
      type: 'pie',
      radius: ['45%', '60%'],
      center: ['50%', '50%'],
      data: echartData,
      hoverAnimation: false,
      itemStyle: {
        normal: {
          borderColor: bgColor,
          borderWidth: 2
        }
      },
      labelLine: {
        normal: {
          length: 20,
          length2: 120,
          lineStyle: {
            color: '#ffffff'
          }
        }
      },
      label: {
        normal: {
          formatter: (params) => {
            return `{icon|●}{name|${params.name}}{value|${formatNumber(params.value)}}`
          },
          padding: [0, -100, 25, -100],
          rich: {
            icon: {
              fontSize: 16
            },
            name: {
              fontSize: 14,
              padding: [0, 10, 0, 4],
              color: '#ffffff'
            },
            value: {
              fontSize: 18,
              fontWeight: 'bold',
              color: '#ffffff'
            }
          }
        }
      }
    }
  ]
})
</script>

<style scoped>
.chart-container {
  width: 440px;
  height: 400px;
}
</style>
